<!DOCTYPE html>

<html>
    <head lang="en">
        <meta charset="UTF-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
                width: 500px;
                margin: 100px auto;
                text-align: center;
            }

            th {
                background-color: #09c;
                font: bold 16px '微软雅黑';
                color: #fff;
                height: 24px;
            }

            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }

            .allCheck {
                width: 80px;
            }
        </style>
    </head>

    <body>
        <table>
            <tr>
                <th class="allCheck">
                    <input type="checkbox" name="" id="checkAll" />
                    <span class="all">全选</span>
                </th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="check" class="ck" />
                </td>
                <td>小米手机</td>
                <td>小米</td>
                <td>￥1999</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="check" class="ck" />
                </td>
                <td>小米净水器</td>
                <td>小米</td>
                <td>￥4999</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="check" class="ck" />
                </td>
                <td>小米电视</td>
                <td>小米</td>
                <td>￥5999</td>
            </tr>
        </table>
        <script>
        const all=document.querySelector('#checkAll')
        const cks=document.querySelectorAll('.ck')
        












            // // 全选反选案例

            // let all = document.querySelector('#checkAll')
            // let cks = document.querySelectorAll('.ck')
            // let span = document.querySelector('.all')

            // {
            //     // 新的做法，配合着数组方法 + 箭头函数 来实现功能

            //     // 把cks伪数组转成数组
            //     cks = Array.from(cks)

            //     // 功能1的改写
            //     all.addEventListener('click', function () {
            //         // 使用forEach遍历
            //         cks.forEach(function (item) {
            //             item.checked = all.checked
            //         })

            //         span.innerHTML = all.checked ? '取消' : '全选'
            //     })

            //     // 功能2的改写
            //     cks.forEach(function (item) {
            //         item.addEventListener('click', function () {
            //             // 判断 cks 是否都选中了 ==> every来判断
            //             let res = cks.every(function (input) {
            //                 // return 判断条件
            //                 return input.checked === true
            //             })
            //             // console.log(res)

            //             // 根据res的结果来决定全选是否选中
            //             all.checked = res
            //             span.innerHTML = res === true ? '取消' : '全选'
            //         })
            //     })
            // }

            // {
            //     // 以前的做法
            //     // 功能1：全选功能
            //     // all.addEventListener('click', function () {
            //     //   // 控制下面三个
            //     //   for (let i = 0; i < cks.length; i++) {
            //     //     cks[i].checked = all.checked
            //     //   }
            //     //   span.innerHTML = all.checked ? '取消' : '全选'
            //     // })
            //     // // 功能2：点击下面三个多选框，反过来控制全选的选中状态
            //     // //       只有当下面三个多选框都选中，才让全选选中
            //     // for (let i = 0; i < cks.length; i++) {
            //     //   cks[i].addEventListener('click', function () {
            //     //     if (document.querySelectorAll('.ck:checked').length === cks.length) {
            //     //       all.checked = true
            //     //       span.innerHTML = '取消'
            //     //     } else {
            //     //       all.checked = false
            //     //       span.innerHTML = '全选'
            //     //     }
            //     //   })
            //     // }
            // }
        </script>
    </body>
</html>
